<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 合并就删除 -->
    <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <!-- 数据 -->
    <link rel="stylesheet" href="../../src/font/font_shy/iconfont.css" />
    <title>疾病管理</title>
    <link rel="stylesheet" href="../../css/sysmgmt(系统管理-角色管理).css" />
    <link rel="stylesheet" href="../../css/disease.css">
    <link rel="stylesheet" href="../../css/article.css">
  </head>
  <body>
    <div class="container-fluid">
      <!-- 查询 -->
      <div class="row" style="margin: 30px 0;">
        <div class="col-lg-8">
          <input class="searchInput" type="text" placeholder="请输入文章名称">
          <select name="" id="classifySeclect">
            <option value="0">选择分类</option>
            <option value="1">生活</option>
            <option value="2">科学</option>
            <option value="3">健康</option>
            <option value="4">其他分类</option>
          </select>
          <button class="searchBtn" type="submit"><span class="iconfont icon-chaxun"></span>&nbsp;查询</button>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="container-fluid">
        <div class="row">
          <button class="addDiseaseBtn" type="button" data-toggle="modal" data-target=".addMode">+&nbsp;新增文章</button>
        </div>
      </div>
      
      <!-- 表格 -->
      <div class="container-fluid">
        <div class="row">
        <table class="kaobianzhan">
        <tbody id="tbodyArticleList">
          <!-- 删除模态框 -->
          <div class="delMode modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="clear modal-content">
                  <div>
                    <h3>删除疾病</h3>
                    <hr>
                  </div>
                    <p>确认删除后，角色将被彻底删除，对应人员所属角色清空</p>
                    <!-- 返回按钮 -->
                    <div style="float: right;">
                      <button type="button" class="quxiaoshanchu btn btn-default" data-dismiss="modal">取消</button>
                      <button class="quedingshanchu"  type="button" class="btn btn-default" data-dismiss="modal">确认</button>
                    </div>
                </div>
            </div>
          </div>
          <tr>
            <th class="kaobianzhan1">ID</th>
            <th>文章名称</th>
            <th>文章分类</th>
            <th>封面图</th>
            <th>作者</th>
            <th>发布时间</th>
            <th>排序值</th>
            <th>是否推荐</th>
            <th>操作</th>
          </tr>
        </tbody>
      </table>
        </div>
        
      </div>
      
      <!-- 底部页功能 -->
      <div class="container-fluid">
        <div class="row">
        <div class="pageBox col-lg-offset-4 col-lg-8">
          <!-- pageBox1:共多少页,选一页多少条 -->
          <div class="pageBox1 col-lg-4 col-md-4 col-sm-4">
            <span>共</span>
            <!-- pageBox1-1共多少条 -->
            <span></span>
            <span>条</span>
            <!-- pageBox1-2选一页多少条 -->
            <!-- <select class="pageBox1-2 form-control" onchange="PageBox12(this)"> -->
              <select class="pageBox1-2 form-control">
              <!-- <option value="5" onclick="pageBox12a(this)">5条/页</option> -->
              <!-- <option value="10" onclick="pageBox12a(this)">10条/页</option> -->
              <option value="10">10条/页</option>
            </select>
          </div>
          <!-- pageBox2:页码 -->
          <div class="pageBox2 col-lg-4 col-md-4 col-sm-4">
            <!-- 上一页prePage -->
            <span class="prePage iconfont icon-xiangzuo"></span>
            <!-- 页码集 -->
            <div class="pageDiv"></div>
            <!-- 下一页nextPage -->
            <span class="nextPage iconfont icon-xiangyou"></span>
          </div>
          <!-- pageBox3:前往+跳转 -->
          <div class="pageBox3 col-lg-4 col-md-4 col-sm-4">
            <span>前往</span>
            <div class="col-sm-5">
              <!-- 跳转输入框pageBox3-1 -->
              <input type="text" class="form-control" id="pageBox3-1" placeholder="1" />
            </div>
            <span>页</span>
            <!-- 页面跳转按钮pageBox3-1Btn -->
            <span class="pageBox3-1Btn">&nbsp;跳转</span>
          </div>
        </div>
      </div>
      </div>
      
      
    </div>
    <!-- 模态框 -->
    <!-- 新增模态框 -->
    <div class="addMode modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <h3 style="margin-left: 30px">新增文章</h3>
            <hr/>
            <div>
              <form class="clear form-horizontal">
                <!-- 文章名称 -->
                <div class="form-group">
                  <label for="wzmc" class="col-sm-2 control-label">文章名称:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="wzmc" placeholder="请输入文章标题" />
                  </div>
                </div>
                <!-- 作者 -->
                <div class="form-group">
                  <label for="zz" class="col-sm-2 control-label">作者:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="zz" placeholder="请输入作者" />
                  </div>
                </div>
                <!-- 文章分类 -->
                <div class="form-group">
                  <label for="wzfl" class="col-sm-2 control-label">文章分类:</label>
                  <div class="col-sm-9">
                    <!-- <input type="text" class="form-control" id="wzfl" placeholder="请输入作者" /> -->
                    <select name="" id="wzfl">
                      <!-- <option value="0">选择分类</option> -->
                      <option value="1">生活</option>
                      <option value="2">科学</option>
                      <option value="3">健康</option>
                      <option value="4">其他分类</option>
                    </select>
                  </div>
                </div>
                <!-- 文章封面 -->
                <div class="form-group">
                  <label for="addwzfm" class="col-sm-2 control-label">文章封面:</label>
                  <div class="col-sm-9">
                    <!-- <input type="text" class="form-control" id="wzfm" placeholder="请输入作者" /> -->
                    <div id="addwzfm">
                        <img src="../../src/img/jiahao.PNG" alt="点击换图片">
                      <span>上传图片</span>
                    </div>
                  </div>
                </div>
                <!-- 文章详情 -->
                <div class="form-group">
                  <label for="wzxq" class="col-sm-2 control-label">文章详情:</label>
                  <div class="col-sm-9">
                    <div>
                      <div class="wzxqStyle">
                        <span class="iconfont icon-jiacu"></span>
                        <span class="iconfont icon-xieti"></span>
                        <span class="iconfont icon-xiahuaxian"></span>
                        <span class="iconfont icon-juzuo"></span>
                        <span class="iconfont icon-juzhong"></span>
                        <span class="iconfont icon-juyou"></span>
                        <span class="iconfont icon-lianjie"></span>
                        <span class="iconfont icon-xiaolian"></span>
                        <span class="iconfont icon-shangchuantupian"></span>
                      </div>
                      <input type="text" class="form-control" name="" id="wzxq"></input>
                    </div>
                  </div>
                </div>
                <!-- 排序值 -->
                <div class="form-group">
                  <label for="pxz" class="col-sm-2 control-label">排序值:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="pxz" placeholder="请输入排序值" />
                  </div>
                </div>
                <!-- 是否推荐 -->
                <div class="form-group">
                  <label for="sftj" class="col-sm-2 control-label">是否推荐:</label>
                  <div class="col-sm-9">
                    <label><input id="addYes" name="sftj" value="1" type="radio" />是</label>
                    <label><input id="addNo" name="sftj" value="0" type="radio" />否</label>
                  </div>
                </div>
                <hr>
                <div style="float: right;">
                  <button type="button" class="quxiaoadd btn btn-default" data-dismiss="modal">取消</button>
                  <button type="button" class="quedingadd btn btn-default" data-dismiss="modal">保存</button>
                </div>
              </form>
            </div>
          </div>
      </div>
    </div>
    <!-- 编辑模态框 -->
    <div class="editMode modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <h3 style="margin-left: 30px">编辑文章</h3>
            <hr/>
            <div>
              <form class="clear form-horizontal">
                <!-- 文章名称 -->
                <div class="form-group">
                  <label for="wzmc" class="col-sm-2 control-label">文章名称:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="wzmc" placeholder="请输入文章标题" disabled="disabled"/>
                  </div>
                </div>
                <!-- 作者 -->
                <div class="form-group">
                  <label for="zz" class="col-sm-2 control-label">作者:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="zz" placeholder="请输入作者" />
                  </div>
                </div>
                <!-- 文章分类 -->
                <div class="form-group">
                  <label for="wzfl" class="col-sm-2 control-label">文章分类:</label>
                  <div class="col-sm-9">
                    <!-- <input type="text" class="form-control" id="wzfl" placeholder="请输入作者" /> -->
                    <select name="" id="wzfl">
                      <!-- <option value="0">选择分类</option> -->
                      <option value="1">生活</option>
                      <option value="2">科学</option>
                      <option value="3">健康</option>
                      <option value="4">其他分类</option>
                    </select>
                  </div>
                </div>
                <!-- 文章封面 -->
                <div class="form-group">
                  <label for="wzfm" class="col-sm-2 control-label">文章封面:</label>
                  <div class="col-sm-9">
                    <!-- <input type="text" class="form-control" id="wzfm" placeholder="请输入作者" /> -->
                    <div id="wzfm">
                        <img src="../../src/img/coverImg.PNG" alt="点击换图片">
                      <span>上传图片</span>
                    </div>
                  </div>
                </div>
                <!-- 文章详情 -->
                <div class="form-group">
                  <label for="wzxq" class="col-sm-2 control-label">文章详情:</label>
                  <div class="col-sm-9">
                    <div>
                      <div class="wzxqStyle">
                        <span class="iconfont icon-jiacu"></span>
                        <span class="iconfont icon-xieti"></span>
                        <span class="iconfont icon-xiahuaxian"></span>
                        <span class="iconfont icon-juzuo"></span>
                        <span class="iconfont icon-juzhong"></span>
                        <span class="iconfont icon-juyou"></span>
                        <span class="iconfont icon-lianjie"></span>
                        <span class="iconfont icon-xiaolian"></span>
                        <span class="iconfont icon-shangchuantupian"></span>
                      </div>
                      <input type="text" class="form-control" name="" id="wzxq"></input>
                    </div>
                  </div>
                </div>
                <!-- 排序值 -->
                <div class="form-group">
                  <label for="pxz" class="col-sm-2 control-label">排序值:</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control" id="pxz" placeholder="请输入排序值" />
                  </div>
                </div>
                <!-- 是否推荐 -->
                <div class="form-group">
                  <label for="sftj" class="col-sm-2 control-label">是否推荐:</label>
                  <div class="col-sm-9">
                    <label><input id="editYes" name="sftj" value="1" type="radio" />是</label>
                    <label><input id="editNo" name="sftj" value="0" type="radio" />否</label>
                  </div>
                </div>
                <hr>
                <div style="float: right;">
                  <button type="button" class="quxiaoedit btn btn-default" data-dismiss="modal">取消</button>
                  <button type="button" class="quedingedit btn btn-default" data-dismiss="modal">保存</button>
                </div>
              </form>
            </div>
          </div>
      </div>
    </div>
    <script>
      // 分类:1生活2科学3健康4其他分类
      // 是否推荐:1推荐2不推荐
      let articleList=[
        {id:1,articleName:'日常作息不规律的危害',classify:1,coverImg:'../../src/img/coverImg.PNG',author:'Mr.GAe',publishTime:'2022-08-06',sort:99,recommend:1,articleDetails:'好看得很1'},
        {id:2,articleName:'吸烟的危害',classify:1,coverImg:'../../src/img/coverImg.PNG',author:'Mr.GTe',publishTime:'2022-08-06',sort:98,recommend:0,articleDetails:'好看得很2'},
        {id:3,articleName:'远离不严谨的说法',classify:1,coverImg:'../../src/img/coverImg.PNG',author:'Mr.GeS',publishTime:'2022-08-06',sort:97,recommend:1,articleDetails:'好看得很3'},
        {id:4,articleName:'文章名称4',classify:2,coverImg:'../../src/img/coverImg.PNG',author:'Mr.GVe',publishTime:'2022-08-06',sort:96,recommend:1,articleDetails:'好看得很4'},
        {id:5,articleName:'文章名称5',classify:3,coverImg:'../../src/img/coverImg.PNG',author:'Mr.GXe',publishTime:'2022-08-06',sort:95,recommend:0,articleDetails:'好看得很5'},
        {id:6,articleName:'文章名称6',classify:4,coverImg:'../../src/img/coverImg.PNG',author:'Mr.GEe',publishTime:'2022-08-06',sort:94,recommend:1,articleDetails:'好看得很6'},
        {id:7,articleName:'文章名称7',classify:2,coverImg:'../../src/img/coverImg.PNG',author:'Mr.GVe',publishTime:'2022-08-06',sort:93,recommend:0,articleDetails:'好看得很7'},
        {id:8,articleName:'文章名称8',classify:1,coverImg:'../../src/img/coverImg.PNG',author:'Mr.GMe',publishTime:'2022-08-06',sort:92,recommend:1,articleDetails:'好看得很8'},
        {id:9,articleName:'文章名称9',classify:3,coverImg:'../../src/img/coverImg.PNG',author:'Mr.GHe',publishTime:'2022-08-06',sort:91,recommend:1,articleDetails:'好看得很9'},
        {id:10,articleName:'文章名称10',classify:2,coverImg:'../../src/img/coverImg.PNG',author:'Mr.G4e',publishTime:'2022-08-06',sort:90,recommend:0,articleDetails:'好看得很10'},
      ]
      let dangqianyeData = [];
      let dangqianyePage = 1; //当前是多少页
      let a = 10;
      let maxPage = Math.ceil(articleList.length / a) ; //pagediv做了之后放进去
      let articleSearchArr = [];
      // let delId=0
      $(".addBtn").click(function () {
        $(this).css({ backgroundColor: "#555a5d" });
      });
      console.log(articleList);
      showData(articleList, 1, a);
      showPage(articleList);

      function showArticleList(data) {
        // console.log("现在是第" + dangqianyePage + "页");
        // console.log("最大页是" + maxPage + "页");
        $(".trArticleList").html("");
        for (let i = 0; i < data.length; i++) {
          let articleClassify=''
          let articleRecommend=''
          if(data[i].classify==1){
            articleClassify='生活'
          }else if(data[i].classify==2){
            articleClassify='科学'
          }else if(data[i].classify==3){
            articleClassify='健康'
          }else if(data[i].classify==4){
            articleClassify='其他分类'
          }
          if(data[i].recommend==0){
            articleRecommend='否'
          }else if(data[i].recommend==1){
            articleRecommend='是'
          }
          $("#tbodyArticleList").append(`
                <tr class="trArticleList">
                    <td>${data[i].id}</td>
                    <td>${data[i].articleName}</td>
                    <td>${articleClassify}</td>
                    <td><img style="width:40px;height:40px;" src="${articleList[i].coverImg}"></td>
                    <td>${data[i].author}</td>
                    <td>${data[i].publishTime}</td>
                    <td>${data[i].sort}</td>
                    <td>${articleRecommend}</td>
                    <td>
                        <span class="editBtn" onclick='edit(${JSON.stringify(data[i])})' style="cursor: pointer;" type="button" data-toggle="modal"  data-target=".editMode">编辑</span>
                        <span class="delBtn" data-del='${JSON.stringify(data[i].id)}' style="cursor: pointer;" type="button" data-toggle="modal" data-target=".delMode">删除</span>
                    </td>
                </tr>
          `);
        }
      }
      function showData(data, pageNum, aa) {
        let firstData = (pageNum - 1) * aa;
        dangqianyeData = data.slice(firstData, firstData + aa);
        console.log('第一条数据是'+firstData);
        showArticleList(dangqianyeData);
        // 点击页码的样式
        // 令当前页的页码改变
        dangqianyePage = pageNum;
      }
      // 上一页
      $(".prePage").click(function () {
        if (dangqianyePage > 1) {
          dangqianyePage -= 1;
          showData(articleList, dangqianyePage, a);
          showPage(articleList);
        }
      });
      $(".nextPage").click(function () {
        maxPage = Math.ceil(articleList.length / a)
        if (dangqianyePage < maxPage) {
          dangqianyePage += 1;
          showData(articleList, dangqianyePage, a);
          showPage(articleList);
        }
      });
      //   页码
      function showPage(data) {
        maxPage = Math.ceil(articleList.length / a)
        $(".pageBox1").children().eq(1).html('');
        $(".pageBox1").children().eq(1).append(`${data.length}`);
        let zuoPage = dangqianyePage;
        let eqPage = (dangqianyePage % a) - 1;
        $(".page").eq(eqPage).addClass("active");
        $(".page").eq(eqPage).siblings().removeClass("active");
        if (zuoPage == 1 || zuoPage % a == 1) {
          $(".pageDiv").html("");
          for (let i = zuoPage; i <= zuoPage + 4; i++) {
            $(".pageDiv").append(`<div class="page">${i}<div>`);
          }
          $(".page").eq(0).addClass("active");
          $(".page").eq(0).siblings().removeClass("active");
        }
      }
      $(".page").click(function () {
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        dangqianyePage = parseInt($(this).text());
        showData(articleList, dangqianyePage, a);
        showPage(articleList)
      });
      
      // 输入页面跳转
      $(".pageBox3-1Btn").click(function () {
        let shuruyema = $("#pageBox3-1").val();
        dangqianyePage = shuruyema;
        showData(articleList, dangqianyePage, a);
        // showPage(articleList)
      });
      // 查询
      $('.searchBtn').click(function() {
        search()
      })
      function search() {
        articleSearchArr = [...articleList]
        let name=$('.searchInput').val()//输入的内容
        let classifySec = $("#classifySeclect option:selected").val();//选择分类
        if (name != 0) {
          for (let i = 0; i < articleSearchArr.length; i++) {
            if (articleSearchArr[i].articleName != name) {
              articleSearchArr.splice(i, 1);
              i--;
            }
          }
        }
          if (classifySec != 0) {
          for (let i = 0; i < articleSearchArr.length; i++) {
            if (articleSearchArr[i].classify != classifySec) {
              articleSearchArr.splice(i, 1);
              i--;
            }
          }
        }
        
        showData(articleSearchArr, dangqianyePage, a);
        showPage(articleSearchArr);
      }
      
      // 删除
      function delData(delid) {
        // console.log(delid);//取到
        for (let i = 0; i < articleList.length; i++) {
          if (articleList[i].id == delid) {
            // console.log('进if');
            articleList.splice(i, 1);
          }
        }
        showPage(articleList);
        showData(articleList, dangqianyePage,a);
      }
      $("#tbodyArticleList").on("click", ".delBtn", function () {
        let id = $(this).attr("data-del");
        // console.log(id);//取到
        $(".quedingshanchu").click(function () {
          // console.log(id);//取到
          delData(id);
        });
      });
      // 新增
      $('.quedingadd').click(function(){
        let addwzmc=$('.addMode #wzmc').val()
        let addzz=$('.addMode #zz').val()
        let addwzfl=$('.addMode option:selected').val()
        let addwzxq=$('.addMode #wzxq').val()
        let addpxz=$('.addMode #pxz').val()
        let addsftj=$('input[name=sftj]:checked').val()
        let addContent={
          id:articleList.length+1,
          articleName:addwzmc,
          classify:addwzfl,
          coverImg:'../../src/img/coverImg.PNG',
          author:addzz,
          publishTime:'2022-08-06',
          sort:addpxz,
          recommend:addsftj,
          articleDetails:addwzxq
          }
        articleList.push(addContent)
        console.log(articleList);
        maxPage = Math.ceil(articleList.length / a)
        showData(articleList,maxPage,a)
        showPage(articleList)
      })
    $('#addwzfm img').click(function () {
      $(this).remove()
      $('#addwzfm').prepend(`<img src="../../src/img/coverImg.PNG" alt="封面图">`)
    })
    // 编辑
    function edit(editData){
        $('.editMode #wzmc').val(editData.articleName)
        $('.editMode #zz').val(editData.author)
        $('.editMode #wzfl').val(editData.classify)
        // $('.editMode #wzfm').val(editData.coverImg)
        $('.editMode #pxz').val(editData.sort)
        editData.recommend==1?$('#editYes').prop('checked',true):$('#editNo').prop('checked',true)
        $('.editMode #wzxq').val(editData.articleDetails)
      }
      $('.quedingedit').click(function () {
        let editwzmc=$('.editMode #wzmc').val()
        let editzz=$('.editMode #zz').val()
        let editwzfl=$('.editMode option:selected').val()
        let editwzxq=$('.editMode #wzxq').val()
        let editpxz=$('.editMode #pxz').val()
        let editsftj=$('input[name=sftj]:checked').val()
        let editContent={
          articleName:editwzmc,
          author:editzz,
          classify:editwzfl,
          articleDetails:editwzxq,
          sort:editpxz,
          recommend:editsftj
        }
        for(let i = 0;i<articleList.length;i++){
        if(editContent.articleName==articleList[i].articleName){
          articleList[i].articleName = editContent.articleName
          articleList[i].author = editContent.author
          articleList[i].classify = editContent.classify
          articleList[i].articleDetails = editContent.articleDetails
          articleList[i].sort = editContent.sort
          articleList[i].recommend = editContent.recommend
        }
      }
      console.log(articleList);
      showData(articleList,dangqianyePage,a)
      showPage(articleList)
      })
    </script>
  </body>
</html>